<template>
    <el-row class="header">
        <el-col :span="12">
            <div ref="bar"></div>
        </el-col>
        <el-col :span="12">
            <div ref="pie"></div>
        </el-col>
        <el-col :span="12">
            <div ref="line"></div>
        </el-col>
        <el-col :span="12">
            <div ref="gauge"></div>
        </el-col>
    </el-row>
</template>

<script>
    import * as echarts from 'echarts'
    import theme from '../assets/customed.json'
    export default {
        name: 'Echarts',
        methods: {
            bar() {
                var chartDom = this.$refs.bar;
                var myChart = echarts.init(chartDom, 'customed');
                var option;

                option = {
                    title: {
                        text: '各台春晚收视率',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['山东卫视', '中央台', '湖南台', '上海卫视', '浙江卫视', '辽宁卫视', '重庆卫视']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };

                option && myChart.setOption(option);
            },
            pie() {
                var chartDom = this.$refs.pie;
                var myChart = echarts.init(chartDom, 'customed');
                var option;

                option = {
                    title: {
                        text: '各台春晚收视率',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '各台春晚收视率',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 1048, name: '中央台' },
                                { value: 735, name: '湖南台' },
                                { value: 580, name: '上海卫视' },
                                { value: 484, name: '山东卫视' },
                                { value: 300, name: '浙江卫视' }
                            ]
                        }
                    ]
                }

                option && myChart.setOption(option);
            },
            line() {
                var chartDom = this.$refs.line;
                var myChart = echarts.init(chartDom, 'customed');
                var option;

                option = {
                    title: {
                        text: '各台春晚收视率',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['除夕', '初一', '初二', '初三', '初四']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '山东卫视',
                            type: 'line',
                            stack: 'Total',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '中央台',
                            type: 'line',
                            stack: 'Total',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '湖南台',
                            type: 'line',
                            stack: 'Total',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '上海卫视',
                            type: 'line',
                            stack: 'Total',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '浙江卫视',
                            type: 'line',
                            stack: 'Total',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
                option && myChart.setOption(option);
            },
            gauge() {
                var chartDom = this.$refs.gauge;
                var myChart = echarts.init(chartDom, 'customed');
                var option;

                option = {
                    series: [
                        {
                            type: 'gauge',
                            axisLine: {
                                lineStyle: {
                                    width: 30,
                                    color: [
                                        [0.3, '#67e0e3'],
                                        [0.7, '#37a2da'],
                                        [1, '#fd666d']
                                    ]
                                }
                            },
                            pointer: {
                                itemStyle: {
                                    color: 'inherit'
                                }
                            },
                            axisTick: {
                                distance: -30,
                                length: 8,
                                lineStyle: {
                                    color: '#fff',
                                    width: 2
                                }
                            },
                            splitLine: {
                                distance: -30,
                                length: 30,
                                lineStyle: {
                                    color: '#fff',
                                    width: 4
                                }
                            },
                            axisLabel: {
                                color: 'inherit',
                                distance: 40,
                                fontSize: 12
                            },
                            detail: {
                                valueAnimation: true,
                                formatter: '{value} km/h',
                                color: 'inherit',
                                fontSize: 14,
                            },
                            data: [
                                {
                                    value: 70,
                                }
                            ]
                        }
                    ]
                };
                setInterval(function () {
                    myChart.setOption({
                        series: [
                            {
                                data: [
                                    {
                                        value: +(Math.random() * 100).toFixed(2)
                                    }
                                ]
                            }
                        ]
                    });
                }, 2000);

                option && myChart.setOption(option);
            }
        },
        mounted() {
            echarts.registerTheme('customed', theme)
            this.bar()
            this.pie()
            this.line()
            this.gauge()
        }
    }
</script>

<style scoped>
    .header {
        height: calc(100vh - 100px);
        overflow: hidden;
    }
    ::v-deep .el-col-12 {
        height: 50%;
    }
    ::v-deep .el-col-12>div {
        height: 100%;
    }
</style>